<template>
    <div class="detail-container">
        <div class="banner">
            <!-- 轮播图插件 -->
            <van-swipe @change="onChange">
                <van-swipe-item v-for="item in list" :key="item.index">
                    <img v-lazy="item" />
                </van-swipe-item>
                <!-- 轮播图中的小图标组件 -->
                <template #indicator>
                    <div class="custom-indicator">{{ current + 1 }}/{{ list.length }}</div>
                    <div class="back">
                        <span class="iconfont icon-fanhui5" @click="goBack"></span>
                        <div class="right">
                            <span class="iconfont icon-gouwuche" @click="goCart"></span>
                            <span class="iconfont icon-gengduomore12" @click="menu"></span>
                        </div>
                    </div>
                </template>
            </van-swipe>
            <!-- 商品价格信息 -->
            <van-card :origin-price="product.oldprice" :price="product.price" :desc="product.product"
                :title="product.shop" thumb="">

                <template #footer>
                    <div class="cart-info">
                        <span>月销120</span>
                        <span>快递:10.00</span>
                        <span>北京</span>
                    </div>
                </template>
            </van-card>
            <!-- 优惠券单元格 -->
            <van-coupon-cell @click="showList = true" />

            <van-cell title="用户评价" @click="goDiscuss" />

            <van-coupon-cell @click="showList = true" />


            <van-list>
                <van-cell title="商品详情"></van-cell>
                <img v-for="item in list" v-lazy="item" :key="item.index" />
                <img src="https://www.pmdaniu.com/storages/125942/c39742603879f35a5a3ff169829cb99e-4387/images/%E5%95%86%E5%93%81%E8%AF%A6%E6%83%85/u1080.jpg"
                    alt="">
            </van-list>
        </div>
        <!-- 分割线 -->
        <van-divider>大家都在看</van-divider>
        <van-grid class="lookGrid" :gutter="10" column-num="2">
            <van-grid-item v-for="item in look" :key="item.id" @click="toDetail(item.id)">
                <div class="look">
                    <img :src="item.picture" alt="">
                    <span>{{ item.shop }}</span>
                    <div>
                        <span class="price">￥{{ item.price }}</span>&nbsp;
                        <span class="oldPrice">￥{{ item.oldprice }}</span>
                    </div>
                </div>
            </van-grid-item>
        </van-grid>

        <!-- 加入购物车 -->
        <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="客服" dot />
            <van-goods-action-icon icon="cart-o" text="购物车" badge="5" @click="goCart" />
            <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
            <van-goods-action-button type="warning" text="加入购物车" @click="addCart" />
            <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>
    </div>
</template>

<script>
import axios from 'axios'

export default {

    data() {
        return {
            current: 0,
            list: [],
            product: {},
            look: []
        }
    },
    created() {
        let id = this.$route.query.id
        console.log('获取Id', id);
        //请求当前商品数据
        this.getProduct(id)
        //请求大家都在看数据
        let randNum = Math.floor(Math.random() * 10) % 5
        randNum == 0 ? randNum = 1 :
            console.log(randNum);
        axios({
            url: '/api/shop/list',
            method: 'get',
            params: {
                pageSize: 4,
                pageNo: randNum
            }
        }).then(res => {
            console.log('look', res.data);
            if (res.data.resultCode == 1) {
                this.look = res.data.resultInfo.list
            }
        })
    },
    methods: {
        //返回
        goBack() {
            this.$router.go(-1)
        },
        //小图标跳转到购物车
        goCart() {
            this.$router.push('/cart')
        },
        //请求商品数据
        getProduct(id) {
            axios({
                url: '/api/shop/find',
                method: 'get',
                params: {
                    id
                }
            }).then(res => {
                console.log('根据id查找商品', res.data);
                if (res.data.resultCode == 1) {
                    let product = res.data.resultInfo
                    this.product = product
                    this.list = product.list
                }
            })
        },
        //三个点
        menu() {
            console.log('小菜单');
        },
        //轮播图改变事件
        onChange(index) {
            this.current = index;
        },
        //加入购物车
        addCart() {
            this.$toast.success('加入购物车\n成功');
            let product = {
                id: this.product.id,
                shop: this.product.shop,
                picture: this.product.picture,
                product: this.product.product,
                price: this.product.price,
                oldprice: this.product.oldprice,
                putaway: this.product.putaway,
                detail: null,
                categoryname: this.product.categoryname,
                categoryId: this.product.categoryId,
                num: this.product.putaway,
                state: false
            }
            this.$store.dispatch('saveCartlist', product)
            console.log('保存的商品', this.$store.getters.cart);
        },
        //跳转到用户评价
        goDiscuss() {
            this.$router.push('/discuss')
        },
        toDetail(id) {
            this.getProduct(id)
            //回到顶部
            var timer = setInterval(function () {
                let osTop =
                    document.documentElement.scrollTop || document.body.scrollTop;
                let ispeed = Math.floor(-osTop / 5);
                document.documentElement.scrollTop = document.body.scrollTop =
                    osTop + ispeed;
                this.isTop = true;
                if (osTop === 0) {
                    clearInterval(timer);
                }
            }, 30);

        }

    }
}
</script>
<style lang="css" scoped>
.back {
    padding-top: 5px;
    position: absolute;
    left: 5px;
    top: 5px;
    text-align: center;
    line-height: 30px;
    display: flex;
    justify-content: space-between;
    /* border: 1px solid #000; */
    width: 100%;

}

.back span {
    font-size: 30px;
    cursor: pointer;
    /* background-color: coral; */
}

.back .right {
    display: flex;
    width: 80px;
    /* border: 1px solid #000; */
    padding: 0 20px;
    justify-content: space-around;
}

.custom-indicator {
    position: absolute;
    right: 20px;
    bottom: 20px;
    padding: 2px 5px;
    font-size: 16px;
    color: #fff;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.3);
}


.banner img {
    width: 100%;
}

.cart-info {
    /* border: 1px solid #000; */
    display: flex;
    justify-content: space-between;
    color: #AEAEAE;
}

.look {
    display: flex;
    flex-direction: column;
}

.look img {
    width: 100%;
}

.look span {}

.price {
    color: red;
}

.oldPrice {
    color: #AEAEAE;
    text-decoration: line-through;
}

.lookGrid {
    padding-bottom: 60px;
}
</style>